{extend name='../app/Admin/View/layout.php'/}

{block name='header'}
{include file='Base/index/style'}
{/block}
{block name='main'}

        <el-container class="layout-container-demo" :style="{height: '100%'}">
            <el-aside width="auto">
                <el-scrollbar :max-height="windowHeight + 'px'" >
                    <el-menu popper-effect="light" :default-active="activeMenu" :collapse="menuFold">
                        <el-menu-item >
                            <span style="margin: auto;font-size: 20px;font-weight: bold"><?= \App\Common\Util\TP::config('app.app_name') ?></span>
                        </el-menu-item>
                        <menu-plus  :items="menuData" @menu-select="handleMenuSelect"></menu-plus>
                    </el-menu>
                </el-scrollbar>
            </el-aside>

            <el-container>
                <el-header style="padding: 0;height: 50px;border-bottom: 1px solid #ebeef5;display: flex;justify-content: space-between">
                    <div>
                        <el-icon v-if="!menuFold" @click="menuFold = !menuFold" class="vue--fold"><Fold /></el-icon>
                        <el-icon v-else  @click="menuFold = !menuFold" class="vue--expand"><Expand /></el-icon>
                        <el-icon class="vue--fold" @click="refreshTab"><component :is="refreshIcon"></component></el-icon>
                        <global-search ref="global-search" @click-menu="handleMenuSelect"></global-search>
                    </div>
                    <div>
                        <account-info></account-info>
                    </div>
                </el-header>
                <el-main style="padding: 0">
                    <el-scrollbar>
                       <main-tabs ref="main-tabs" :default-active="activeMenu"  @tab-change="tabChangeUpdateMenu"></main-tabs>
                    </el-scrollbar>
                </el-main>
            </el-container>
        </el-container>
{/block}

{block name='footer'}
    {// 菜单 }
{include file='VueComponents/menu-plus'}
    {// 全局搜索 }
{include file='Base/index/global-search'}
    {// 内容选项卡 }
{include file='Base/index/main-tabs'}
    {// 用户相关信息 }
{include file='Base/index/account-info'}

    <script>
        VueInit.data.refreshIcon = 'Refresh-Right';
        VueInit.data.activeMenu = 'home';
        VueInit.data.menuFold = false;
        VueInit.data.menuData = [];

        VueInit.methods.handleMenuSelect = function (value){
            this.$refs['main-tabs'].add(value);
            this.activeMenu = value.index.toString();
        }
        VueInit.methods.tabChangeUpdateMenu = function (value){
            this.activeMenu = value.toString();
        }
        VueInit.methods.getMenu = function (){
            axios({
                url: "<?= tp()->to([\App\Admin\Controller\Base\IndexController::class, 'getMenu']) ?>"
            }).then(({data}) => {
                if (data.code === 200) {
                    this.menuData = data.data;
                    this.$refs['global-search'].updateMenu(this.menuData);
                }
            });
        }
        VueInit.event.addHandler('created:getMenu');

        VueInit.methods.refreshTab = function (v1, v2, v3){
            let target;
            if(this.activeMenu === 'home'){
                target = this.$refs["main-tabs"].$refs['tab-home'];
            }else{
                target = this.$refs["main-tabs"].$refs['IF-ref-' + this.activeMenu][0];
            }

            target.contentWindow.location.reload();
            this.refreshIcon = 'close';

            setInterval((v) => {
                if(target.contentWindow){
                    clearInterval(v);
                    this.refreshIcon = 'Refresh-Right';
                }
            }, 10);
        }

        VueInit.methods.openTab = function (route, title, index){
            let menuData = null;
            this.menuData.map(menu => {
                if (menu.route === route && !menuData) {
                    menuData = menu;
                }
            });

            if (menuData) {
                this.$refs['main-tabs'].add(menuData);
                this.activeMenu = menuData.index.toString();
                return;
            }

            index = index ? index : Math.random();
            this.$refs['main-tabs'].add({
                route: route,
                title: title,
                index: index
            });
            this.activeMenu = index;
        }
    </script>
{/block}